<template>
  <div class="edit_box">
    <el-scrollbar>
      <el-form
        ref="csForm"
        class="csForm"
        :model="pageData.formData"
        :rules="pageData.formRules"
        status-icon
        label-width="120px"
      >
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="类别编号：" prop="fEcCode">
              <el-input
                v-model="pageData.formData.fEcCode"
                placeholder="请输入产品类别编号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类别名称：" prop="fEcName">
              <el-input
                v-model="pageData.formData.fEcName"
                placeholder="请输入产品类别名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类别归属：" prop="fEcAffProduct">
              <el-select
                v-model="pageData.formData.fEcAffProduct"
                placeholder="请选择产品类别归属"
                style="width: 100%"
                @change="selectParamFrom"
              >
                <el-option
                  v-for="item in pageData.csSource"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="录入人员：">
              <el-input
                v-model="pageData.formData.fFullName"
                autocomplete="off"
                :disabled="!pageData.isAdd || pageData.isAdd"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="录入时间：">
              <el-input
                v-model="pageData.formData.fCreatorTime"
                autocomplete="off"
                :disabled="!pageData.isAdd || pageData.isAdd"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：">
              <el-input
                v-model="pageData.formData.fRemark"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-scrollbar>
    <el-row>
      <el-col :span="24" style="text-align: right">
        <el-button @click="onHandleCancel">取消</el-button>
        <el-button type="primary" @click="onHandleSure"> 提交 </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElLoading, ElMessage } from "element-plus";
const lodash = require("lodash");

import { add_cpcate, change_cpcate, cx_cpinfo } from "@/api/basic/PdCategory";

export default {
  props: {
    modifyObj: { type: Object, required: true },
    isAdd: { type: Boolean, required: true, default: false },
  },
  setup(props, context) {
    onMounted(() => {
      // getCssource();
      pageData.formData = {
        fAuditUserId: "", //录入人id;
        fAuditorTime: "", //录入时间
        fBookCode: "",
        fCreateUserId: "",
        fCreatorTime: "",
        fEcAffProduct: "", //装备分类归属[1: 装备，2: 材，3: 机工具]
        fEcCode: "", //装备分类编号
        fEcName: "", //装备分类名称
        fId: "", //内码
        fLastModifyTime: "",
        fLastModifyUserId: "",
        fRemark: "",
        fState: 0,
      };
      if (!props.isAdd) {
        getData(props.modifyObj);
      }
    });

    // 表单绑定返回的数据
    const csForm = ref();

    const pageData = reactive({
      // 参数ID
      csID: [],
      // 类别来源
      csSource: [
        {
          value: "1",
          label: "装备",
        },
        {
          value: "2",
          label: "器材",
        },
        {
          value: "3",
          label: "机工具设备",
        },
      ],
      // 参数类型
      // csType: [
      //   {
      //     value: "1",
      //     label: "字符串",
      //   },
      //   {
      //     value: "2",
      //     label: "整数",
      //   },
      //   {
      //     value: "3",
      //     label: "小数",
      //   },
      //   {
      //     value: "4",
      //     label: "日期",
      //   },
      // ],
      formData: {},
      formRules: {
        //验证规则
        fEcCode: [
          { required: true, message: "请输入类别编号", trigger: "blur" },
        ],
        fEcName: [
          { required: true, message: "请输入类别名称", trigger: "blur" },
        ],
        fEcAffProduct: [
          { required: true, message: "请选择类别归属", trigger: "blur" },
        ],
      },
      isAdd: props.isAdd,
    });

    // 选择参数来源
    // const selectParamFrom = (val) => {
    //   // console.log("val", val);
    //   select_csSourceFw(val)
    //     .then((res) => {
    //       // console.log("res", res.data.data);
    //       pageData.csID = res.data.data;
    //       console.log("pageData.csID", pageData.csID);
    //       // pageData.formData.fParamValue = pageData.csID.name;
    //       // console.log("fParamValue", pageData.formData);
    //     })
    //     .catch((error) => {
    //       console.log("error", error);
    //     });
    // };
    // 选择参数ID
    const selectParamValueID = (val) => {
      console.log("val", val);
      let csitem = pageData.csID.filter((item, index) => {
        return item.code == val;
      });
      pageData.formData.fParamValue = csitem[0].name;
    };

    const onHandleCancel = () => {
      csForm.value?.resetFields();
      context.emit("cancel");
    };
    // 提交按钮
    const onHandleSure = () => {
      csForm.value?.validate((valid) => {
        if (valid) {
          const loading = ElLoading.service({
            lock: true,
            background: "rgba(0, 0, 0, 0.7)",
          });
          if (props.isAdd) {
            add_cpcate(pageData.formData) //新增
              .then((res) => {
                console.log("新增产品类别", res);
                if (res.msg === "装备分类名称已存在") {
                  ElMessage.error("该装备分类名称已经存在,请重新输入");
                } else if (res.msg === "装备分类编号已存在") {
                  ElMessage.error("该装备分类编号已经存在,请重新输入");
                } else {
                  loading.close();
                  ElMessage({
                    type: "success",
                    message: "添加成功",
                  });
                  context.emit("ok", {
                    isAdd: props.isAdd,
                    retObj: pageData.formData,
                  });
                }
                // loading.close();
                // context.emit("ok", {
                //   isAdd: props.isAdd,
                //   retObj: pageData.formData,
                // });
              })
              .catch((error) => {
                loading.close();
                ElMessage.error(error.message || "请求出错");
              });
          } else {
            pageData.formData.fCreatorTime = new Date(
              pageData.formData.fCreatorTime
            );
            change_cpcate(pageData.formData)
              .then((res) => {
                console.log(res);
                loading.close();
                ElMessage({
                    type: "success",
                    message: "编辑成功",
                  });
                context.emit("ok", {
                  isAdd: props.isAdd,
                  retObj: pageData.formData,
                });
              })
              .catch((error) => {
                loading.close();
                ElMessage.error(error.message || "请求出错");
              });
          }
        } else return false;
      });
    };

    // const onHandleSure = ()=>{
    //    if (props.isAdd) {
    //     add_cpcate(pageData.formData)//新增
    //           .then( (res)=>{
    //             console.log(res)
    //           } )
    //    }
    // }

    const getData = (item) => {
      console.log("item", item);
      cx_cpinfo(item.fId)
        .then((res) => {
          console.log("121212", res);
          pageData.formData = res;
          // pageData.formData.personlist.forEach((item) => {
          //   onRoleBlur(item);
          // });
        })
        .catch((error) => {
          ElMessage.error(error.message || "请求出错");
        });
    };

    return {
      csForm,
      pageData,
      // selectParamFrom,
      selectParamValueID,
      onHandleCancel,
      onHandleSure,
    };
  },
};
</script>

<style lang="scss">
.edit_box {
  height: 100%;
  background-color: white;
  .csForm {
    width: calc(100% - 6px);
  }
}
</style>
